<section class="grid grid-cols-2 gap-x-12" hx-ext="response-targets" id="servers-view">
    <article class="mx-4">
        <h1 class="text-accent text-center text-2xl font-bold">
            Announced servers
        </h1>
        <div class="overflow-x-auto">
            <div id="server-error"></div>
            <table class="table table-sm" id="announced-servers">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Server IP</th>
                        <th>Port</th>
                        <th>State</th>
                        <th>Name</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    {{if eq (len .servers) 0}}
                        <tr>
                            <td colspan="6" class="text-center">No servers announced yet</td>
                        </tr>
                    {{else}}
                        {{range .servers}}
                            {{template "components/server_row" .}}
                        {{end}}
                    {{end}}
                </tbody>
            </table>
        </div>
    </article>
    <article class="mx-4">
        <h1 class="text-accent text-center text-2xl font-bold">Add server</h1>
        <form
            hx-post="/api/v1/servers"
            hx-target="#servers-view"
            hx-target-400="#announce-error"
            hx-swap="outerHTML"
        >
            <div id="announce-error"></div>
            <div class="grid grid-cols-2">
                <div class="form-group flex gap-x-2">
                    <label class="form-control w-full max-w-xs">
                        <div class="label">
                            <span class="label-text">Server IP</span>
                        </div>
                        <input name="server-ip" type="text" placeholder="1.1.1.1" class="input input-bordered input-primary w-full max-w-xs" required />
                    </label>
                    <label class="form-control w-32 max-w-xs">
                        <div class="label">
                            <span class="label-text">Port</span>
                        </div>
                        <input name="server-port" type="number" placeholder="80" value="80" class="input input-bordered input-secondary w-full max-w-xs" required max="65535" min="1" />
                    </label>
                    <label>
                        <div class="label">
                            <span class="label-text">State</span>
                        </div>
                        <select name="server-state" class="select select-bordered select-info">
                            <option value="2">Offline</option>
                            <option value="3">Full</option>
                            <option value="4">Busy</option>
                            <option value="1">Online</option>
                        </select>
                    </label>
                </div>
                <div class="form-group flex gap-x-2">
                    <label class="form-control w-full max-w-xs">
                        <div class="label">
                            <span class="label-text">Proxy IP (Optional)</span>
                        </div>
                        <input name="proxy-ip" type="text" class="input input-bordered w-full max-w-xs" />
                    </label>
                    <label class="form-control w-32 max-w-xs">
                        <div class="label">
                            <span class="label-text">Port</span>
                        </div>
                        <input name="proxy-port" type="number" class="input input-bordered w-full max-w-xs" max="65535" min="1" />
                    </label>
                </div>
            </div>
            <div class="form-group">
                <label class="form-control w-full">
                    <div class="label">
                        <span class="label-text">Server Name</span>
                    </div>
                    <input name="server-name" type="text" placeholder="My server" class="input input-bordered input-accent w-full max-w-xs" required maxlength="30"/>
                </label>
            </div>
            <button class="btn btn-success mt-2 w-full">Announce server</button>
        </form>
    </article>
</section>